import { Avatar, Button, Col, Input, Row, Select, Table, Tag } from "antd";
import moment from "moment";
import React, { FC, useEffect, useState } from "react";
import MyTitle from "../../components/Title";
import { Popconfirm } from "antd";
import { connect } from "react-redux";
import { useNavigate } from "react-router-dom";
import { ajax } from "./../../api/index";
import { inject, observer } from "mobx-react";
import { baseURL } from "../../api/request";

const BanJiList: FC<any> = ({ uinfo, data }) => {
  const Navigate = useNavigate();

  const { banjiList, getBanJiListAsync, getBanJiList } = data;
  const { userInfo } = uinfo;
  console.log(userInfo);

  const gotosetbanji = (item: any) => {
    Navigate("/main/jiaowu/detail/" + item._id);
  };

  useEffect(() => {
    getBanJiListAsync();
  }, []);

  const confirmDel = async (item: any) => {
    let { code, result } = await ajax.banjidelete({
      _id: item._id,
    });

    if (code == 200) {
      var list = banjiList.filter((v: any) => v._id != item._id);
      getBanJiList(list);
    }
  };
  // 表头
  const columns: any = [
    {
      title: "序号",
      render: (text: any, item: any, index: any) => {
        return index + 1;
      },
      align: "center",
      width: 80,
    },

    {
      title: "班级名称",
      align: "center",
      width: 80,

      // dataIndex:"username",
      render(value: any, item: any, index: any) {
        return <span> {value.title} </span>;
      },
    },

    {
      title: "班级创建时间",
      align: "center",
      dataIndex: "time",
      render(value: any, item: any, index: any) {
        return <span> {moment(value).format("YYYY-MM-DD HH:mm")} </span>;
      },
    },
    {
      title: "班级人数",
      dataIndex: "number",
      align: "center",
      width: 180,
    },
    {
      title: "班主任",
      align: "center",
      dataIndex: "boss",
      // render(value: any, item: any, index: any) {
      //   return <span> {value.boss} </span>;
      //   <Tag color={banzhurenList.find((item) => item.values == 1)?.color}>
      //     {banzhurenList.find((item) => item.values == 1)?.labels}
      //   </Tag>
      // },
    },
    // {
    //   title: "班主任",
    //   align: "center",
    //   // dataIndex: "role",
    //   render(value: any, item: any, index: any) {
    //     return (
    //       <Tag color={roleList.find((item) => item.value == value.role)?.color}>
    //         {roleList.find((item) => item.value == value.role)?.label}
    //       </Tag>
    //     );
    //   },
    // },

    {
      title: "班级图片描述",
      // dataIndex: "avatar",
      align: "center",
      width: 160,
      render(value: any, item: any, index: any) {
        return (
          <span>
            <Avatar
              src={value.avatar.replace(/public/, baseURL)}
              style={{ width: 100, height: 100 }}
            />
          </span>
        );
      },
    },
    {
      title: "操作",
      align: "center",
      width: 180,
      render(value: any, item: any, index: any) {
        return (
          <span>
            {userInfo.role >= 4 && (
              <Popconfirm
                title="确定删除吗?"
                onConfirm={() => confirmDel(item)}
                okText="删除"
                cancelText="取消"
              >
                <Button
                  size="small"
                  type="primary"
                  danger
                  // ghost
                  style={{ margin: "0 10px" }}
                >
                  删除
                </Button>
              </Popconfirm>
            )}

            {userInfo.role >= 3 && (
              <Button
                onClick={() => gotosetbanji(item)}
                size="small"
                type="primary"
                // ghost
              >
                查看
              </Button>
            )}
          </span>
        );
      },
    },
  ];
  return (
    <div>
      <MyTitle text="班级列表" />

      <Row style={{ marginTop: 20 }}>
        <Col span={23} offset={1}>
          <Table
            dataSource={banjiList}
            columns={columns}
            rowKey={(item: any) => item._id}
            sticky
            bordered
            id="mytable"
            pagination={{ pageSize: 6 }}
          ></Table>
        </Col>
      </Row>
    </div>
  );
};

export default inject("data", "uinfo")(observer(BanJiList));
